﻿ LABORATOR 7 Introducere in HTML Obiectiv • Familiarizarea cu elementele de baza ale limbajului HTML: taguri, tabele, link-uri, imagini • Construirea unei pagini web personale Se prezintă în continuare elementele de bază ce intervin în compoziţia codului html CAPITOLUL 1: TAG-URI Paginile de web sunt, de regulă, realizate într-un limbaj numit HTML - HyperText Mark-up Language Editarea codului care stă la baza acestora se poate face în orice program de editare texte, spre exemplu utilitarul Notepad din Windows Există însa şi editoare de text specializate, în care informaţia este introdusă în tabele folosind o interfaţă grafică, codul html fiind generat automat (de ex MS Front Page din pachetul MS Office) Fişierul pe care îl vom edita pe parcursul lucrării se va numi index html Acest nume nu este ales întâmplător: în general, pagina web „principală” (cea care se deschide atunci când accesăm o adresa web, ex www upt ro) se numeş te index html Instrucţiunile pe care le folosim într-o pagină HTML se numesc tag-uri şi acestea indică browser-ului (Internet Explorer, Mozilla Firefox etc) modul de prezentare al informaţiei din pagină Tag-urile se scriu între semnele „ ” Un prim exemplu de utilizare a tag-ului FONT este ilustrat în cele ce urmează: Universitatea „Politehnica” Timişoara Instrucţiunea de mai sus va determina afişarea textului "Universitatea „Politehnica” Timişoara " cu font arial şi culoarea albastră După cum se poate observa, există un tag înaintea textului şi unul care încheie textul respectiv Majoritatea tag-urilor funcţionează în acest mod: se pun înaintea informaţiei pe care dorim să o prezentăm într-un anume mod iar apoi la sfârşitul acesteia, ca în exemplul de mai sus În general, aceste tag-uri au o structură „concentrică”: ultimul tag deschis va fi primul închis Acest lucru rezultă din figura 1 Fig 1: Deschiderea şi închiderea tag-urilor html inclusiv faptul că în editorul de texte folosit se compune o pagina web trebuie semnalat cu un tag special Astfel, conţinutul oricărui fişier HTML trebuie inclus între tag-urile şi Aceasta înseamnă că tag-ul ier HTML, iar tag-ul trebuie să fie ultimul: trebuie să fie primul lucru care apare într-un fiş aici se completează informaţia de prezentat în pagină 1 Ca structură, o pagină HTML are două părţi: o parte delimitată de tag-urile şi ce conţine informaţii de identificare a paginii şi o parte (cea mai cuprinzătoare) delimitată de tag-urile şi ce conţine informaţiile de prezentat efectiv în pagină Cel mai important tag utilizat în secţiunea HEAD este cel care dă titlul paginii (titlu afişat în bara de sus a paginii web accesate) Acest titlu va fi încadrat de şi Un exemplu de pagină HTML foarte simplă, având titlul "ETC, Facultatea de Electronică şi Telecomunicaţii" este: ETC, Facultatea de Electronica şi Telecomunicaţii aici se completează conţinutul paginii Tag-urile , , şi sunt tag-uri foarte importante şi ele vor apărea o singură dată în cadrul unui fişier HTML Partea Practică: Se copiază instrucţiunile de mai sus în Notepad şi se salvează fişierul cu numele index html în calea D:/Resurse Studenţi/HTML Această pagină este apoi vizualizată executând dublu click pe fişierul index Fereastra deschisă va avea ca titlu "ETC, Facultatea de Electronică şi Telecomunicaţii " şi drept conţinut " aici se completează conţinutul paginii " CAPITOLUL 2: FORMATAREA TEXTELOR Deoarece world wide web-ul încearcă să prezinte informaţia într-o manieră cât mai atractivă, textul este una dintre cele mai importante componente ale unei pagini web Într-o formă simplă, acesta poate fi scris efectiv într-o pagină HTML, după cum am văzut în exemplul anterior: am scris în fişierul HTML textul " aici se completează informaţia de prezentat în pagina " şi acesta s-a încărcat în mod identic în browser Sunt, prin urmare, foarte importante elementele de formatare a textului, care vor fi trecute în revistă în continuare Două lucruri trebuie menţionate în primul rând, legate de formatarea textelor: utilizarea spaţiilor şi trecerea la un nou rând Într-un fişier HTML afişarea mai multor spaţii consecutive nu este posibilă prin introducerea directă de spaţii în fişierul html (acest lucru nu va avea nici un efect la afişarea paginii) , ci folosind de mai multe ori sintagma (câte o dată pentru fiecare spaţiu) Astfel, pentru a pune trei spaţii între cuvintele ETC şi Timişoara în textul "ETC Timişoara" va trebui să scriem în fişierul HTML astfel: ETC Timişoara 2 Trecerea la un nou rând nu se face apăsând Enter în fişierul HTML, ci utilizând tag-ul (spre deosebire de majoritatea celorlalte tag-uri, acest tag se utilizează singur: nu trebuie închis cu ) Astfel, pentru a scrie "ETC" pe un rând, a lăsa un rând liber, şi "Timişoara" pe un rând separat, vom folosi: ETC Timisoara Am utilizat mai sus de două ori tag-ul BR: o dată pentru saltul la un nou rând şi o dată pentru a lăsa un rând liber Tag-ul utilizat pentru formatarea modului de afişare a textului este Tag-ul FONT suportă mai mulţi parametri, printre care: - SIZE=x, unde x este dimensiunea font-ului (1 fiind dimensiunea cea mai mică); - COLOR=#RRGGBB - culoarea cu care se va afişa font-ul Orice culoare se poate compune din trei culori de bază: roşu, verde şi albastru (Red-Green-Blue, RGB) Acestei compoziţii îi corespunde un cod hexazecimal, unde intensitatea fiecărei culori este reprezentată pe un octet De ex , 00FF00 este codul pentru culoarea verde Culoarea implicită este negru; - FACE=font - font-ul cu care va fi scris textul respectiv Aceşti parametri pot fi utilizaţi separat sau simultan în cadrul tag-ului FONT Astfel, instrucţiunea de mai jos afişează text folosind culoarea albastru: ETC ,O opţiune de viitor Instrucţiunea de mai jos afişează acelaşi text cu font arial, culoare roşie şi dimensiune mai mare: ETC ,O opţiune de viitor a cum am mai precizat se pot utiliza mai mulţi parametri în cadrul aceluiaşi tag FONT, separaţi prin spaţiu Aş Alte tag-uri utile pentru formatarea textelor sunt: - utilizat pentru scrierea textelor cu bold, - utilizat pentru scrierea textelor cu italics (litere înclinate) şi - pentru a scrie text subliniat Desigur, pot exista combinaţii între tag-ul FONT şi tag-urile de subliniere, îngroşare sau înclinare, ca de exemplu: Text verde îngroşat Un alt element util în formatarea paginii web este tag-ul Acesta este utilizat pentru alinierea pe centru a unor elemente (texte, tabele, imagini) Tot ce este scris între tag-ul şi va apare centrat Este important de menţionat încă o dată că tag-urile trebuie închise în ordine „concentrică”: tag-ul deschis ultimul se închide primul, tag-ul penultim se închide al doilea şamd 2 1 LISTE Un capitol aparte ţinând de formatarea textului în html îl reprezintă listele Eticheta care poate fi folosită pentru definirea unei liste diferă în funcţie de tipul de listă pe care dorim să îl creăm Există mai multe tipuri de liste, cele mai utilizate fiind cele: nenumerotate (neordonate) şi numerotate (ordonate) În primul caz, definirea listei se face cu eticheta , în cel de-al doilea se foloseşte În ambele cazuri declararea unui nou element în interiorul listei foloseşte eticheta Exemplu: 3 Comunicaţii Electronică Aplicată Măsurări Electrice Aceeaşi listă, deschisă şi închisă cu va enumera elementele din lista numerotându-le în ordine crescatoare Este posibilă şi construirea de subliste în interiorul listelor 2 2 HEADING-URI Heading-urile sunt folosite în general într-un document html pentru a scrie titlul unui document sau al unei secţiuni a unui document Există 6 niveluri de heading, etichetate de la până la În principiu, ceea ce diferă între aceste heading-uri este mărimea cu care browser-ul web va afişa fontul, începând cu (mărimea cea mai mare) şi până la (mărimea cea mai mică) Interesant, în legatură cu aceste heading-uri, este că ele vor începe întotdeauna la o nouă linie (fără a fi nevoie de folosirea tagului ), iar închiderea heading-ului va conduce la un salt la linia următoare Spre exemplu instrucţiunea: ETC ,O opţiune de viitor ), în formatul dorit al font-urilor va afişa textul ETC ,O opţiune de viitor sub forma unui heading (a unui titlu de pagină Partea practică În fişierul index html deschis în Notepad, ştergeţi rândul care conţine " aici se completează informaţia de prezentat în pagină " şi înlocuiţi-l cu: ETC ,O opţiune de viitor În cadrul facultăţii noastre, există următoarele departamente: Comunicaţii Electronică Aplicată Măsurări Electrice 4Acum, daca se salvează fişierul index html şi se reîncarcă în browser (opţiunea Refresh din Internet Explorer) se va modifica corespunzător cu codul introdus CAPITOLUL 3: TABELE Tabelele se utilizează folosind tag-ul Din punct de vedere al organizării şi al aspectului vizual al paginii, acest tag este unul dintre cele mai importante În general, toată informaţia afişată la accesarea unei pagini web este conţinută de tabele şi tabele în interiorul tabelelor, având diverse setări pentru margini, background, lăţime, număr de celule, spaţierea celulelor etc Pentru a înţelege modul în care tabelele sunt implementate sub forma de cod html, imaginaţi-vă un tabel simplu deschis în Word care cuprinde mai multe căsuţe În fişierul HTML, tabelele sunt organizate pe rânduri (rows - linii orizontale de căsuţe) La rândul lor, rândurile sunt organizate în elemente (căsuţe): x Fig 2: Exemplu de tabel HTML Tabelul din figura 2 conţine 3 rânduri, fiecare rând conţinând 5 elemente În interiorul unui tag de tip TABLE, rândurile sunt declarate folosind tag-ul , iar in cadrul fiecărui tag TR elementele (căsuţele) sunt declarate cu tag-ul Fiecare element (căsuţă) poate conţine text, imagini, link-uri, etc Un tabel de tipul celui de mai sus ar fi codificat astfel: 1 x În exemplul de mai sus avem un tag care delimitează tabelul şi trei tag-uri corespunzând celor trei rânduri ale tabelului Fiecare tag TR conţine câte 5 tag-uri Între şi se introduce conţinutul efectiv al fiecărei căsuţe În exemplul de mai sus numai căsuţa din mijloc are conţinut – litera x Tag-urile de definire a tabelelor pot avea diverse atribute, utile pentru formatarea tabelului Astfel, tag-ul „principal” TABLE poate fi asociat cu: - WIDTH=x sau WIDTH=x% - acesta specifică lungimea întregului tabel în pixeli (de exemplu WIDTH=500) sau în procente faţă de dimensiunea întregii ferestre (de exemplu WIDTH=50%) Ca o menţiune utilă, setarea în pixeli a dimensiunilor în html este oarecum „riscantă”, deoarece modul de afişare al paginii va depinde foarte mult de rezoluţia în pixeli a monitorului pe care se afişează pagina respectivă 5- HEIGHT=x sau HEIGHT=x% - similar cu WIDTH, dar pentru înălţimea întregului tabel (exemple: HEIGHT=300 sau HEIGHT=100%); - BORDER=x - dacă x este 1 atunci tabelul va avea şi "cadru" (linii de delimitare a elementelor) Daca x este 0, atunci acestea vor lipsi (deci BORDER=0 sau BORDER=1 sunt cele două opţiuni posibile în acest caz); - CELLSPACING=x - specifică spaţiul dintre căsuţe, în pixeli; - CELLPADDING=x - specifică spaţiul dintre marginea unei căsuţe şi conţinutul acesteia, în pixeli Şi în acest caz pot fi folosite toate aceste atribute împreună, numai o parte a lor, sau nici unul (caz în care se încarcă formatul „by default” al tabelului) Un tag TABLE ce le foloseşte pe toate ar arăta astfel: Conţinutul tabelului si tag-ul TD poate avea o serie de atribute de formatare:: - WIDTH=x sau WIDTH=x% - lungimea căsuţei, în pixeli sau ca procent din lungimea întregului tabel; - HEIGHT=x sau HEIGHT=x% - înălţimea căsuţei, în pixeli sau exprimată ca procent din înălţimea întregului tabel; - BGCOLOR=#RRGGBB - culoarea fundalului căsuţei, ca de exemplu BGCOLOR=#EEEEDD - ALIGN=RIGHT, ALIGN=LEFT sau ALIGN=CENTER - modul cum va fi poziţionat conţinutul căsuţei în interiorul acesteia: la dreapta, la stânga sau central; : sus, jos - VALIGN=TOP, VALIGN=BOTTOM sau VALIGN=CENTER - similar, dar pentru poziţionarea pe verticală sau central Şi textul din interiorul unei căsuţe trebuie formatat la rândul sau O căsuţă ce ar conţine un text roşu pe fond albastru deschis s-ar codifica astfel: text Un tabel mai puţin tipic este prezentat in figura 3: CELULA 1 CELULA 2 CELULA 3 CELULA 4 Fig 3: Tabel HTML în care formatul liniilor se schimbă de la o linie la cealaltă Un asemenea tabel s-ar codifica astfel: CELULA 1 CELULA 2 CELULA 3 CELULA 4 Remarcaţi utilizarea atributului COLSPAN=3 în prima celulă a celui de-al doilea rând Acesta indică faptul că celula respectivă se "întinde" pe lungimea a trei celule din structura normală a tabelului În consecinţă, acest al doilea rând va conţine numai o singură celulă, nu trei De asemenea, textul este aliniat la dreapta pe prima linie, şi central pe cea de-a doua linie 6Partea Practică Încărcaţi tabelul de mai jos în fişierul index html, folosind utilitarul notepad Încercaţi să identificaţi structura acestui tabel şi modul în care este el folosit pentru a transmite informaţia conţinută de pagina web Modificând diverse etichete (ex: table width) încercaţi să surprindeţi modificările care au loc în aspectul vizual al paginii atunci când aceasta este reîncărcată folosind browserul web Adresa: BD V Pârvan, nr 2 Activitate În clădirea din Bd V Pârvan îşi desfăşoară activitatea trei facultăţi cu profil electric: AC, ETC si ET CAPITOLUL 4: LINK-URI Un element important al oricărei pagini web îl constituie link-urile Acestea pot fi link-uri externe, care conduc către un alt site, sau link-uri interne care conduc spre alte pagini ale aceluiaşi site Ambele tipuri se codifică asemănător prin folosirea unui tag de tipul (pentru un link intern) sau indice calea pe calculator pentru un link extern În primul caz, link-ul trebuie să (pe maşina pe care este plasată pagina web) spre fişierul spre care dorim link-ul Daca acesta se găseşte în acelaşi director cu fişierul ce conţine link-ul, este suficient să se indice doar numele fişierului pe care dorim sa îl deschidem, calea fiind implicită Astfel codul de mai jos va afişa textul "Apăsaţi aici pentru pagina 2" care prin apăsare va încărca fişierul pag2 html (bineînţeles, daca acest fişier există): Apăsaţi aici pentru pagina 2 7Codul de mai jos va afişa "Apăsaţi aici pentru pagina UPT", text care prin apăsare va încărca pagina www upt ro: Apăsaţi aici pentru pagina UPT În exemplul de mai sus se poate specifica în ce mod se va încărca pagina respectivă folosind atributul TARGET: - TARGET="nume", unde nume este numele pe care doriţi să îl daţi unei noi ferestre unde se va încărca pagina Se poate folosi şi TARGET=" blank" pentru o fereastră nouă sau TARGET=" self" pentru încărcarea în aceeaşi fereastră O altă variantă de link este posiblitatea transmiterii unui e-mail Astfel, codul de mai jos afişează "Scrie-ne!", text care prin apăsare va deschide o fereastra pentru transmiterea unui mesaj la adresa xxx@upt ro (pentru aceasta este nevoie de un program client de mail setat corespunzător, pe calculatorul pe care se vizualizează pagina): Scrie-ne! Aceste link-uri nu se restrâng doar la link-uri spre alte pagini html, ci pot fi link-uri directe spre fisiere în diverse formate: doc, txt, pdf etc Partea Practică Se îmbunătăţeşte conţinutul fişierului index html deschis în Notepad, prin introducerea unor link-uri În acest sens, completaţi textul din tabelul anterior cu propoziţiile: "Vă stăm la dispoziţie prin e- mail Dacă doriţi să ne vizitaţi pagina web, apăsaţi aici ” Aceste informaţii se pot introduce într-o nouă linie, care să cuprindă ambele coloane (în acest sens, folosiţi COLSPAN=2 ca parametru al etichetei ) CAPITOLUL 5: IMAGINI Prezentarea imaginilor în pagini HTML se face folosind tag-ul , unde „nume” este numele unui fişier gif sau jpg Tag-ul IMG poate primi şi atributul BORDER cu formele BORDER=0 (implicit) sau BORDER=n - pentru un chenar în jurul pozei de dimensiune n pixeli Acest tag se foloseşte de unul singur, la fel ca si tag-ul break (nu se ”închide”) Mai mult decât atât, se poate folosi o imagine ca şi link înspre o altă pagină: i Telecomunicaţii Se mai pot folosi Cu un click pe imaginea de mai sus se va deschide pagina Facultăţii de Electronică ş imagini şi drept fundal pentru pagini internet Pentru aceasta, vom introduce atributul BACKGROUND în cadrul tag- ului de la începutul unui fişier: Partea Practică Se introduce o nouă linie în tabelul din fişierul index html Această linie va conţine imaginea de pe pagina principală a facultăţii noastre Pentru a putea folosi aceasta imagine, accesaţi pagina www etc upt ro, click dreapta pe imaginea de pe prima pagină şi selectaţi Save Picture As Imaginea trebuie salvata pe harddisk-ul staţiei locale, la aceeaşi locaţie la care se găseşte şi fişierul index Pe această imagine se va introduce un link înspre site-ul facultăţii noastre 8